<template>
    <div class="amap-page-container map-zoom" :style="{'height':mapHeight}">
        <el-amap vid="map-search" :zoom="zoom" :mapStyle="mapStyle" :amap-manager="amapManager" :center="center" :plugin="plugin">
            <!--区域-->
            <template v-if="searchLngLat">
                <el-amap-marker vid="search-marker" :position="searchLngLat" :visible="true" ></el-amap-marker>
            </template>

            <template v-for="(polygon, index) in polygonsText">
                <el-amap-text :text="polygon.contentRender"
                              :events="polygon.events"
                              v-if="polygon.isShow"
                              textAlign="center"
                              verticalAlign="center"
                              :position="polygon.position">
                </el-amap-text>
            </template>
            <el-amap-polygon
                    v-for="(polygon, index) in polygonsEdit"
                    :path="polygon.path"
                    :fillOpacity="polygon.fillOpacity"
                    :strokeOpacity="polygon.strokeOpacity"
                    :strokeColor="polygon.borderColor"
                    :fillColor="polygon.bgColor"
                    :draggable="polygon.draggable"
                    :editable="polygon.editable"
                    :events="polygon.events">
            </el-amap-polygon>
            <!--区域-->
        </el-amap>
        <div class="tuceng">
            <el-select v-model="mapStyle" placeholder="请选择主题" style="width: 100px;margin-left: 10px;border: 1px solid #D8DCE6;">
                <el-option
                        v-for="item in themeData"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </div>
        <div class="search-input">
            <el-input placeholder="请输入内容" v-model="searchInput" class="input-with-select">
                <el-button slot="append" icon="el-icon-search" @click="toSearch"></el-button>
            </el-input>
        </div>
    </div>
</template>

<script>
    import color from '../../init/color.js';  // 颜色js
    import VueAMap from "vue-amap";
    import { lazyAMapApiLoaderInstance } from 'vue-amap';
    let amapManager = new VueAMap.AMapManager();
    export default {
        data() {
            return {
                polygonsEdit: [], // 区域信息
                polygonsText: [], // 文本信息
                mapStyle: 'amap://styles/whitesmoke',
                themeData: [
                    {
                        label: '标准',
                        value: 'amap://styles/normal'
                    },
                    {
                        label: '远山黛',
                        value: 'amap://styles/whitesmoke'
                    },
                    {
                        label: '幻影黑',
                        value: 'amap://styles/dark'
                    },
                    {
                        label: '月光银',
                        value: 'amap://styles/light'
                    },
                    {
                        label: '草色青',
                        value: 'amap://styles/fresh'
                    },
                    {
                        label: '雅士灰',
                        value: 'amap://styles/grey'
                    },
                    {
                        label: '涂鸦',
                        value: 'amap://styles/graffiti'
                    },
                    {
                        label: '马卡龙',
                        value: 'amap://styles/macaron'
                    },
                    {
                        label: '靛青蓝',
                        value: 'amap://styles/blue'
                    },
                    {
                        label: '极夜蓝',
                        value: 'amap://styles/darkblue'
                    },
                    {
                        label: '酱籽',
                        value: 'amap://styles/wine'
                    }
                ],
                amapManager:amapManager,
                zoom: 11,
                center: [],
                plugin: [{
                    pName: 'MapType',
                    defaultType: 0,
                    events: {
                        init(instance) {
                        }
                    }
                }],
                searchInput:'',
                searchApi:'address/search?address=',
                searchLngLat: []
            };
        },
        props: {
            areaData: {
                type: Array,
                default: ()=>{
                    return []
                }
            },
            mapHeight: {
                type: String,
                default: '90vh'
            }
        },
        watch: {
            areaData:function (val) {
                this.initArea();
            }
        },
        created() {

            this.center = JSON.parse(localStorage.getItem('lnglat'));
            this.searchLngLat = this.center;
        },
        mounted() {
        },
        methods: {
            toSearch() {
                if (!this.searchInput) {
                    this.$message('请输入要查询的地址');
                } else {
                    this.$http.get(this.searchApi + this.searchInput)
                        .then((response) => {
                            console.info('response',response);
                            if (response.data.data.gaode_location.lng && response.data.data.gaode_location.lat) {
                                this.searchLngLat = [response.data.data.gaode_location.lng,response.data.data.gaode_location.lat];
                                this.center = this.searchLngLat;
                            } else {
                                this.$message.error('没搜索到！');
                            }
                        })
                        .catch((error) => {
                            this.$message.error('请求数据错误');
                        });
                }

            }, // 搜索
            addMarker() {
                let marker = {
                    position: [116.397428 + (Math.random() - 1) * 0.02, 39.90923 + (Math.random() - 1) * 0.02]
                };
                this.searchLngLat = marker.position;
                this.center = marker.position
            },
            getSum(total, num) {
                return total + num;
            },  // 二维数组平均值函数
            averageColRow(arr) {
                let _this = this;
                let Max = 0;
                arr.map(function (item) {
                    Max = Math.max(Max, item.length);
                })
                let result = Array(Max).fill("")
                    .map(function (_e, outerIndex) {
                        return arr.map(function (e, innerIndex, input) {
                            return e[outerIndex]
                        }).filter(function (ele) {
                            return ele !== undefined
                        })
                    });

                let permutationArray = result.map(function (item) {
                    {
                        return item.filter(function (ele) {
                            return ele != 0;
                        })
                    }

                });
                return permutationArray.map(function (item) {
                    // console.info('平局值', item.reduce(_this.getSum,0)/item.length);
                    return item.reduce(_this.getSum, 0) / item.length;
                })

            },  // 二维数组平均值函数
            initArea() {  // 初始化地图
                const self = this;
                self.polygonsEdit = [];
                self.polygonsText = [];
                let areaList = self.areaData;
                for (let key in areaList) {
                    self.polygonsText.push({
                        isShow: true,
                        contentRender: areaList[key].name,
                        position: self.averageColRow(JSON.parse(areaList[key].area)),
                        events: {
                            click: () => {
                            }
                        }
                    });
                    self.polygonsEdit.push({
                        editable: false,
                        id: areaList[key].id,
                        contentRender: areaList[key].name,
                        draggable: false,
                        fillOpacity: "0.3",
                        strokeOpacity: "0.5",
                        bgColor: color[key],
                        borderColor: color[key],
                        path: areaList[key].area ? JSON.parse(areaList[key].area) : [],
                        events: {
                            click: () => {
                            }
                        }
                    });
                }
            }
        }
    };
</script>
<style lang="less" scoped>
    .amap-page-container {
        height: 100%;
        position: relative;
        .tuceng{
            position: absolute;
            top: 100px;
            right: 0px;
        }
        .search-input{
            width: 500px;
            position: absolute;
            top: 10px;
            left: 10px;
        }
    }
</style>
